<style lang="less" scoped>
.container-login{
   
    width:650px;
    margin:10em auto;
    h3{
        margin-bottom: 1.5em;
        color:antiquewhite;
        padding-left: 80px;
    }
}
</style>
<template>
    <div class="">
        <div class="container-login">
            <h3>运维物资订单回填系统</h3>
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <Form-item prop="user">
                    <Input type="text" v-model="formInline.user" placeholder="用户名">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="密码" @on-keyup.enter="handleSubmit('formInline')">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                </Form-item>
            </Form>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Login',
    data: function (router) {
        return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 2, message: '密码长度不能小于2位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.checkCreds()
                } else {
                    this.$Message.error('表单验证失败!')
                }
            })
        },
        checkCreds() {
            //  Login
            this.$store.dispatch("login", { username: this.formInline.user, password: this.formInline.password }).then((resp) => {
                var data = resp.data.itemMap
                if (resp.data.errCode == '001') {
                    this.$Message.error("用户名或密码错误")
                } else {
                    //  success. Let's load up the dashboard
                    console.log(data.token)
                    if (window.localStorage) {
                        // window.localStorage.setItem('user', JSON.stringify(data.user))
                        window.localStorage.setItem('token', data.token)
                    }

                    this.$router.push("/")
                }

            })
        },
       
    }
}
</script>
